<template>
  <el-dialog :title="!formData.created_at? '创建菜单':'修改菜单'" :visible.sync="isShowDialog" @close="btnCancel">
    <el-form v-if="isShowDialog" ref="addMenuList" label-width="5rem" :model="formData" :rules="rules">
      <el-row v-if="checkBtn">
        <el-col :span="12">
          <el-form-item label="菜单类型" style="width:25rem">
            <template>
              <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">
                <el-radio-button label="menu" @click.native="menuQ=true">菜单</el-radio-button>
                <el-radio-button label="btn" @click.native="menuQ=false">按钮</el-radio-button>
              </el-radio-group>
            </template>
          </el-form-item>
        </el-col>
      </el-row>
      <div v-if="menuQ">
        <el-row>
          <el-col :span="12">
            <el-form-item label="菜单名称" style="width:25rem" prop="permission_name">
              <el-input v-model="formData.permission_name" placeholder="请输入菜单名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="菜单地址" style="width:25rem" prop="route">
              <el-input v-model="formData.route" placeholder="请输入路由地址，以/开头" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="组件地址" style="width:25rem" prop="component">
              <el-input v-model="formData.component" placeholder="请输入组件路径地址，不以/开头" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="权限标识" style="width:25rem" prop="permission_mark">
              <el-input v-model="formData.permission_mark" placeholder="格式：controller@action" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="菜单图标" style="width:25rem" prop="icon">
              <!-- <el-input placeholder="请选择菜单图标" prefix-icon="el-icon-search ">1</el-input> -->
              <el-select v-model="formData.icon" placeholder="点击选择图标" prefix-icon="el-icon-search">
                <el-option
                  v-for="item in options"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="Redirect" style="width:25rem" prop="redirect">
              <el-input v-model="formData.redirect" placeholder="请输入Redirect" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin:1.875rem 0">
          <el-col :span="10" style="margin-left:.9375rem">
            <label style="margin-right:1.875rem">是否外链</label>
            <el-radio v-model="formData.islink" :label="1">是</el-radio>
            <el-radio v-model="formData.islink" :label="2">否</el-radio>
          </el-col>
          <el-col :span="10" style="margin-left:5rem">
            <label style="margin-right:1.875rem">排序</label>
            <el-input-number v-model="formData.sort" :min="1" :max="list.length" label="描述文字" size="small" />
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10" style="margin-left:.9375rem">
            <label style="margin-right:2.25rem">Hidden</label>
            <el-radio v-model="formData.hidden" :label="1">是</el-radio>
            <el-radio v-model="formData.hidden" :label="2">否</el-radio>
          </el-col><el-col :span="10" style="margin-left:5rem">
            <label style="margin-right:1.875rem">KeepAlive</label>
            <el-radio v-model="formData.keepalive" :label="1">是</el-radio>
            <el-radio v-model="formData.keepalive" :label="2">否</el-radio>
          </el-col>
        </el-row>
      </div>
      <div v-else>
        <el-row>
          <el-col :span="12">
            <el-form-item label="按钮名称" style="width:25rem" prop="permission_name">
              <el-input v-model="formData.permission_name" placeholder="请输入按钮名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="权限标识" style="width:25rem" prop="permission_mark">
              <el-input v-model="formData.permission_mark" placeholder="格式：controller@action" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <label style="margin:0 30px">排序</label>
            <el-input-number v-model="formData.sort" :min="1" :max="10" label="描述文字" size="small" />
          </el-col>
        </el-row>
      </div>
    </el-form>
    <el-row slot="footer" type="flex" justify="end">
      <el-button size="small" @click="btnCancel">取消</el-button>
      <el-button type="primary" size="small" @click="btnOk">确定</el-button>
    </el-row>
  </el-dialog>
</template>

<script>
import { addMenuList, editMenuList } from '@/api/permission'
const mobelData = {
  permission_name: '',
  route: '',
  component: '',
  permission_mark: '',
  redirect: '',
  hidden: 1, // 1是显示，2是不显示
  keepalive: null, // 1=>是，2=>否
  islink: 2, // 1是外链，2是不外链
  sort: 10,
  icon: '',
  type: 1,
  parent_id: 0
}
export default {
  name: 'AdminAddmenu',
  props: {
    list: {
      type: Array,
      required: true
    }
  },

  data() {
    return {
      more: 0,
      isShowDialog: false,
      options: ['dashboard', 'example', 'eye-open', 'eye', 'form', 'fullscreen', 'link', 'logination', 'menu', 'nested', 'password', 'role', 'setting', 'size', 'system', 'table', 'tree', 'user'],
      // radio: '1',
      formData: mobelData,
      rules: {
        permission_name: [
          { required: true, message: '必填', trigger: 'blur' },
          { min: 2, max: 8, message: '长度在2-8之间', trigger: 'blur' }
        ],
        route: [
          { required: true, message: '必填', trigger: 'blur' }
        ],
        permission_mark: [
          { required: true, message: '必填', trigger: 'blur' }
        ]
      },
      tabPosition: 'menu',
      checkBtn: false,
      menuQ: true
    }
  },

  mounted() {},

  methods: {
    btnCancel() {
      this.formData = mobelData
      this.isShowDialog = false
      // this.rowData = {}
    },
    async btnOk() {
      try {
        await this.$refs.addMenuList.validate()
        if (this.formData.created_at) {
          await editMenuList(this.formData)
          this.$message.success('修改成功')
        } else {
          if (this.menuQ) {
            await addMenuList(this.formData)
            this.$message.success('添加成功')
          } else {
            this.formData.type = 2
            console.log(this.formData)
            await addMenuList(this.formData)
            this.$message.success('添加成功')
          }
        }
        this.$parent.getMenuList()
        this.isShowDialog = false
        // this.rowData = {}
        this.btnCancel()
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>
